<template>
	<div class="scroll-x-warp">
    <div class="scroll-ovl js-scroll-ovl">
      <slot/>
    </div>
    <div v-if="showBar" class="scrollbar"><i :style="{'left': scrollbarLeft}"></i></div>
  </div>
</template>
<script>
	export default {
		name: 'scroll-x-warp',
		data() {
			return {
				scrollbarLeft: '0%',
			}
		},
		props: {
			// 超过多少个展示scrollbar
			showBar: {
				type: Boolean,
				default: true
			},
		},
		mounted() {
			let scrollElem = document.querySelector('.js-scroll-ovl')
			scrollElem.addEventListener('scroll', this.scrollX)
		},
		methods: {
			scrollX (e) {
				var sl = e.target.scrollLeft,
            width = e.target.scrollWidth - e.target.clientWidth,
            rotate = sl / width * 100;
            rotate = rotate <= 50 ? 0 : rotate - 50;
        this.scrollbarLeft = `${rotate}%`
			}
		}
	}
</script>
<style lang="less" scoped>
  @import "~@style_m/basic/utils/index";
	.scroll-x-warp {
    position: relative;
    background: white;
    padding: 5px 0;
    .scroll-ovl {
      display: flex;
      overflow-x: auto;
      &::-webkit-scrollbar{
        display: none;
      }
    }
    .scrollbar {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      width: 30px;
      height: 3px;
      border-radius: 3px;
      background: @color-bg;
      overflow: hidden;

      i {
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: @color-main;
      }
    }
  }
</style>